<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<!-- css links -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/caption-hover.css" />
<link rel="stylesheet" type="text/css" href="css/circle-hover.css" />
<link href="css/slider.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link href="css/bootstrap-select.min.css" rel="stylesheet" type="text/css" media="all">
<!-- /css links -->
<link href='http://fonts.useso.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script> 


<style type="text/css">
	.height_60{
		height:60px;
	}
	.btn{
		font-size: 19px;
		height:60px;
	}
	.btn-default {
	    color: #333;
	    background-color:rgba(255, 255, 255, 0.18);
	    border-color: #3c763d;
    }
    .btn-default:focus {
	    color: #333;
	    background-color: #e6e6e6;
	    border-color: #3c763d;
    }
    .section_abousUs_p{
    	font-size: 19px;
		color: #fff;
		font-weight: 300;
		line-height: 1.7em;
    }
    .clickIn{
    	cursor:pointer;
    }
    .hide_area{
    	display:none ;
    }
    .show_area{
    	display:block ;
    }
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">

<!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#myPage">陶统计</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-right">
				<li class="active"><a href="#myPage">首页</a></li>
				<li><a href="#about">收支记录</a></li>
				<li><a href="#services">详细统计</a></li>
				<li><a href="#portfolio">Portfolio</a></li>
				<li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
<!-- /Fixed navbar -->	
<!-- 网页的binner轮播图片，可做保护隐私 -->
<!-- Banner -->
<div class="banner">
	<div id="content">
        <div id="slider">
			<img src="images/banner1.jpg" alt="We Bring" data-url="#1">
			<img src="images/banner2.jpg" alt="The Good" data-url="#2">
			<img src="images/banner3.jpg" alt="Vegetable Farm" data-url="#3">
			<img src="images/banner4.jpg" alt="To Life" data-url="#4">
		</div>
	</div>	
</div>
<!-- /Banner -->

<!-- About -->
<section class="about-us" id="about">
	<h3 class="text-center slideanim">营收记录</h3>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-lg-offset-2 slideanim">
                <p>记录每天卖出的物品，包括卖出物品种类，卖出物品的数量，卖出物品的时间，物品购买的用途，以及物品最终去向地</p>
            </div>
            <div class="col-lg-4 slideanim">
            	<h4 style="color: red;">注意：</h4>
                <p>1、如果没有物品种类可去物品种类处添加。</p>
                <p>2、物品卖出时间，卖出用途，以及物品最终去处可以为后续数据分许提供数据材料，请填写！ </p>
            </div>
        </div>
    </div>
</section>
<div class="content-section-a">
	<div class="container">
		<div class="row">
			<!-- 营收统计表单 -->
				<div class="col-lg-12 slideanim">
				<form role="form">
					<div class="row">
						<div class="form-group col-lg-6">
							<label for="sale_goods_input">售出物品</label>
							<div class="input-group">
		                        <input id="sale_goods_input" type="text" class="form-control height_60" style="width:">
		                        <div class="input-group-btn">
		                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
		                            </ul>
		                        </div>
		                    </div>
						</div>
						<!-- 花纹 -->
						<div class="form-group col-lg-6">
							<label for="sale_goodsStyle_input">花纹</label>
							<div class="input-group">
		                        <input id="sale_goodsStyle_input" type="text" class="form-control height_60" >
		                        <div class="input-group-btn">
		                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
		                            </ul>
		                        </div>
		                    </div>
						</div>
						
						<div class="clearfix"></div>
						
						<div class="form-group has-success has-feedback col-lg-6">
							<label>单价</label>
							<input id="sale_price_input" class="form-control height_60" aria-describedby="inputError2Status">
							<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" ></span>
  							<!-- <span id="inputError2Status" class="sr-only" style="display:block;">输入错误</span> 提示暂时不用文字提示 -->
						</div>
						<div class="form-group has-error has-feedback col-lg-6">
							<label for="sale_number_input">数量</label>
							<input type="text" id="sale_number_input" class="form-control height_60" aria-describedby="inputError2Status">
							<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" ></span>
  							<!-- <span id="inputError2Status" class="sr-only" style="display:block;">输入错误</span> 提示暂时不用文字提示 -->
						</div>
						
						<div class="clearfix"></div>
						
						<div class="form-group  col-lg-6">
							<label for="sale_destionation_select">发往地</label>
							<select id="sale_destionation_select" class="selectpicker show-tick form-control"  data-live-search="true">
		                    </select>
						</div>
						
						<div class="form-group  col-lg-6">
							<label for="sale_goal_input">客户购买目的</label>
							<div class="input-group">
		                        <input id="sale_goal_input" type="text" class="form-control height_60" style="width:">
		                        <div class="input-group-btn">
		                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
		                            </ul>
		                        </div>
		                    </div>
						</div>
						
						<div class="clearfix"></div>
						<div class="form-group col-lg-12">
							<label for="sale_remarks_textarea">备注</label>
							<textarea id="sale_remarks_textarea" class="form-control" rows="6"></textarea>
						</div>
						<div class="form-group col-lg-12">
							<button type="submit" href="#" class="btn btn-lg btn-outline">Submit</button>
						</div>
					</div>
				</form>
				</div>
			
			<!-- 营收统计表单结束 -->
			
			
            <!-- <div class="col-lg-5 col-sm-6">
				<div class="content1">
					<h3 class="section-heading slideanim">Vegetable Farm Building a Better Tomorrow.</h3>
					<hr class="section-heading-spacer slideanim">
					<div class="clearfix"></div>
					<p class="lead slideanim">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				</div>
			</div> -->
            <!-- <div class="col-lg-5 col-lg-offset-2 col-sm-6 slideanim">
                <ul class="grid cs-style">
					<li>
						<figure>
							<img src="images/farm1.jpg" alt="" class="img-responsive">
							<figcaption>
								<h3>Vegetable Farm</h3>
								<p>Building a Better Tomorrow.</p>
							</figcaption>
						</figure>
					</li>
				</ul> 
			</div> -->
			
        </div>
	</div>
</div>
<section class="about-us" >
	<h3 class="text-center slideanim">支出记录</h3>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-lg-offset-2 slideanim">
                <p>记录每次进货的物品，包括进货的物品类，样式，单价，进货商，进货时间，备注</p>
            </div>
            <div class="col-lg-4 slideanim">
            	<h4 style="color: red;">注意：</h4>
                <p class="section_abousUs_p">1、如果没有物品种类可去物品种类处添加。</p>
                <p class="section_abousUs_p">2、如果没有进货商，可去进货商处添加。 </p>
                <p class="section_abousUs_p">3、进货商，以及进货时间必填，可备日后的数据挖掘提供数据材料。</p>
                <p class="section_abousUs_p">4、备注可添加该货品的一些其他信息。</p>
            </div>
        </div>
    </div>
</section>

<div class="content-section-b">
	<div class="container">
		
		<div class="col-lg-12 slideanim"><!-- 进货统计 -->
				<form role="form">
					<div class="row">
						<div class="form-group col-lg-6">
							<label for="purchase_goods_input">进货商品</label>
							<div class="input-group">
		                        <input id="purchase_goods_input" type="text" class="form-control height_60" style="width:">
		                        <div class="input-group-btn">
		                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
		                            </ul>
		                        </div>
		                    </div>
						</div>
						<!-- 花纹 -->
						<div class="form-group col-lg-6">
							<label for="purchase_goodsStyle_input">花纹</label>
							<div class="input-group">
		                        <input id="purchase_goodsStyle_input" type="text" class="form-control height_60" >
		                        <div class="input-group-btn">
		                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
		                            </ul>
		                        </div>
		                    </div>
						</div>
						
						<div class="clearfix"></div>
						
						<div class="form-group has-success has-feedback col-lg-6">
							<label for="purchase_price_input">商品进价</label>
							<input id="purchase_price_input" class="form-control height_60" aria-describedby="inputError2Status">
							<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" ></span>
  							<!-- <span id="inputError2Status" class="sr-only" style="display:block;">输入错误</span> 提示暂时不用文字提示 -->
						</div>
						<div class="form-group has-error has-feedback col-lg-6">
							<label for="purchase_number_input">数量</label>
							<input type="text" id="purchase_number_input" class="form-control height_60" aria-describedby="inputError2Status">
							<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" ></span>
  							<!-- <span id="inputError2Status" class="sr-only" style="display:block;">输入错误</span> 提示暂时不用文字提示 -->
						</div>
						
						<div class="clearfix"></div>
						<div class="form-group col-lg-12">
							<label for="purchase_remarks_textarea">备注</label>
							<textarea id="purchase_remarks_textarea" class="form-control" rows="6"></textarea>
						</div>
						<div class="form-group col-lg-12">
							<button type="submit" href="#" class="btn btn-lg btn-outline">Submit</button>
						</div>
					</div>
				</form>
				</div>
	
		<!-- <div class="row">
            <div class="col-lg-5 col-sm-6">
				<div class="content3">
					<h3 class="section-heading slideanim">Vegetable Farm The Fresh Maker!</h3>
					<hr class="section-heading-spacer slideanim">
					<div class="clearfix"></div>
					<p class="lead slideanim">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				</div>
			</div>
            <div class="col-lg-5 col-lg-offset-2 col-sm-6 slideanim">
                <ul class="grid cs-style">
					<li>
						<figure>
							<img src="images/farm3.jpg" alt="" class="img-responsive">
							<figcaption>
								<h3>Vegetable Farm</h3>
								<p>The Fresh Maker!</p>
							</figcaption>
						</figure>
					</li>
				</ul>
            </div>
        </div> -->
	</div>
</div>
<!-- /About -->
<!-- /Services -->
<!-- 查看记账列表，进货列表，以及记账统计，进货统计数据的按钮 -->
<section class="our-services" id="services">
    <h3 class="text-center slideanim">详细统计</h3>
	<ul class="ch-grid">
		<li>
			<div class="ch-item ch-img-1 slideanim">				
				<div class="ch-info-wrap">
					<div class="ch-info">
						<div class="ch-info-front ch-img-1"></div>
						<div class="ch-info-back clickIn" url="销售列表页面">
							<h5>销售列表</h5>
							<p>查看所有的销售记录</p>
						</div>	
					</div>
				</div>
			</div>
			<h4 class="slideanim">销售列表</h4>
			<p class="slideanim">查看所有的销售记录</p>
		</li>
		<li>
			<div class="ch-item ch-img-2 slideanim">
				<div class="ch-info-wrap">
					<div class="ch-info">
						<div class="ch-info-front ch-img-2"></div>
						<div class="ch-info-back clickIn" url="进货列表页面">
							<h5>进货列表</h5>
							<p>查看所有的进货记录</p>
						</div>
					</div>
				</div>
			</div>
			<h4 class="slideanim">进货列表</h4>
			<p class="slideanim">查看所有的进货记录</p>
		</li>
		<li>
			<div class="ch-item ch-img-3 slideanim">
				<div class="ch-info-wrap">
					<div class="ch-info">
						<div class="ch-info-front ch-img-3"></div>
						<div class="ch-info-back">
							<h5>销售统计</h5>
							<p>功能在路上，敬请期待！</p>
						</div>
					</div>
				</div>
			</div>
			<h4 class="slideanim">销售统计</h4>
			<p class="slideanim">销售情况的数据分析图表</p>
		</li>
		<li>
			<div class="ch-item ch-img-4 slideanim">
				<div class="ch-info-wrap">
					<div class="ch-info">
						<div class="ch-info-front ch-img-4"></div>
						<div class="ch-info-back">
							<h5>进货统计</h5>
							<p>功能在路上，敬请期待！</p>
						</div>
					</div>
				</div>
			</div>
			<h4 class="slideanim">进货统计</h4>
			<p class="slideanim">进货情况的数据分析图表</p>
		</li>
	</ul>
</section>
<!-- 销售记录的列表 -->
<div class="content-section-a hide_area" id="sale_list_div" >
	<div class="container">
		<h1 class="text-center">销售列表</h1>
		<table class="table table-bordered table-hover ">
	      <thead>
	        <tr>
	          <th>序号</th>
	          <th>销售时间</th>
	          <th>销售种类</th>
	          <th>销售金额</th>
	          <th>客户类型</th>
	        </tr>
	      </thead>
	      <tbody>
	        <tr>
	          <th scope="row">1</th>
	          <td>2016年3月21日</td>
	          <td>5</td>
	          <td>2000.00</td>
	          <td>个人</td>
	        </tr>
	        <tr>
	          <th scope="row">2</th>
	          <td>2016年3月21日</td>
	          <td>3</td>
	          <td>6000.00</td>
	          <td>批发</td>
	        </tr>
	        <tr>
	          <th scope="row">3</th>
	          <td>2016年3月21日</td>
	          <td>5</td>
	          <td>4500.00</td>
	          <td>批发</td>
	        </tr>
	        <tr>
	          <th scope="row">3</th>
	          <td>2016年3月21日</td>
	          <td>5</td>
	          <td>4500.00</td>
	          <td>批发</td>
	        </tr>
	        <tr>
	          <th scope="row">3</th>
	          <td>2016年3月21日</td>
	          <td>5</td>
	          <td>4500.00</td>
	          <td>批发</td>
	        </tr>
	        <tr>
	          <th scope="row">3</th>
	          <td>2016年3月21日</td>
	          <td>5</td>
	          <td>4500.00</td>
	          <td>批发</td>
	        </tr>
	        <tr>
	          <th scope="row">3</th>
	          <td>2016年3月21日</td>
	          <td>5</td>
	          <td>4500.00</td>
	          <td>批发</td>
	        </tr>
	        <tr>
	          <th scope="row">3</th>
	          <td>2016年3月21日</td>
	          <td>5</td>
	          <td>4500.00</td>
	          <td>批发</td>
	        </tr>
	        <tr>
	          <th scope="row">3</th>
	          <td>2016年3月21日</td>
	          <td>5</td>
	          <td>4500.00</td>
	          <td>批发</td>
	        </tr>
	        <tr>
	          <th scope="row">3</th>
	          <td>2016年3月21日</td>
	          <td>5</td>
	          <td>4500.00</td>
	          <td>批发</td>
	        </tr>
	      </tbody>
	    </table>
		
		<nav class="text-center">
		  <ul class="pagination">
		    <li>
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <li><a href="#">1</a></li>
		    <li><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>

	</div>
</div>
<!-- 进货记录的列表 -->
<div class="content-section-b hide_area" id="purchase_list_div">
	<div class="container">
		<h1 class="text-center">进货列表</h1>
		<table  class="table table-bordered table-hover ">
	      <thead>
	        <tr>
	          <th>序号</th>
	          <th>进货时间</th>
	          <th>进货种类</th>
	          <th>进货金额</th>
	          <th>进货厂家</th>
	        </tr>
	      </thead>
	      <tbody>
	        <tr>
	          <th scope="row">1</th>
	          <td>2016年3月21日</td>
	          <td>3</td>
	          <td>100.00</td>
	          <td>国贸三店</td>
	        </tr>
	        <tr >
	          <th scope="row">2</th>
	          <td>2016年3月21日</td>
	          <td>4</td>
	          <td>1003.00</td>
	          <td>鑫辉陶瓷</td>
	        </tr>
	        <tr>
	          <th scope="row">3</th>
	          <td>2016年3月21日</td>
	          <td>10</td>
	          <td>1550.50</td>
	          <td>银山红陶瓷，光明陶瓷</td>
	        </tr>
	      </tbody>
	    </table>
		<nav class="text-center">
		  <ul class="pagination">
		    <li>
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <li><a href="#">1</a></li>
		    <li><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		 </ul>
	</nav>
	</div>
</div>
<!-- /Services -->
<!-- Portfolio Grid Section -->
<section id="portfolio">
	<h3 class="text-center slideanim">Our Portfolio</h3>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-12 portfolio-item slideanim">
                <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
					<div class="caption">
						<div class="caption-content">
							<i class="fa fa-paper-plane-o"></i>
						</div>
					</div>
					<img src="images/port1.jpg" class="img-responsive" alt="">
				</a>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12 portfolio-item slideanim">
                <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
					<div class="caption">
                        <div class="caption-content">
							<i class="fa fa-paper-plane-o"></i>
                        </div>
					</div>
                    <img src="images/port2.jpg" class="img-responsive" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12 portfolio-item slideanim">
                <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-paper-plane-o"></i>
                        </div>
                    </div>
                    <img src="images/port3.jpg" class="img-responsive" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12 portfolio-item slideanim">
                <a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-paper-plane-o"></i>
                        </div>
                    </div>
                    <img src="images/port4.jpg" class="img-responsive" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12 portfolio-item slideanim">
				<a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-paper-plane-o"></i>
                        </div>
                    </div>
                    <img src="images/port5.jpg" class="img-responsive" alt="">
                </a>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-12 portfolio-item slideanim">
                <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-paper-plane-o"></i>
                        </div>
                    </div>
					<img src="images/port6.jpg" class="img-responsive" alt="">
                </a>
            </div>
        </div>
    </div>
</section>
<!-- /Portfolio Grid Section -->
<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade slideanim" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h3>Vegetable Farm</h3>
						<hr>
                        <img src="images/port1.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h3>Vegetable Farm</h3>
                        <hr>
                        <img src="images/port2.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h3>Vegetable Farm</h3>
                        <hr>
                        <img src="images/port3.jpg" class="img-responsive img-centered" alt="">
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h3>Vegetable Farm</h3>
                        <hr>
                        <img src="images/port4.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
						<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h3>Vegetable Farm</h3>
                        <hr>
                        <img src="images/port5.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h3>Vegetable Farm</h3>
                        <hr>
                        <img src="images/port6.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Portfolio Modals -->
<!-- Blog -->
<section class="our-blog" id="blog">
	<h3 class="text-center slideanim">Our Blog</h3>
    <div class="container">
		<div class="row">
			<div class="col-md-3 col-xs-12">
				<div class="view view-seventh slideanim">
                    <img src="images/blog1.jpg" alt="" class="img-responsive"/>
                    <div class="mask">
                        <h5>January 2,2016</h5>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
						<a href="#contact-info" class="info">Write To Us</a>
                    </div>
                </div>
				<div class="blog-content slideanim">
					<p class="p1">News - January 2,2016</p>
					<a href="#"><h4>Its The Vegetable Farm You Can See.</h4></a>
					<p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
				</div>
			</div>
			<div class="col-md-3 col-xs-12">
				<div class="view view-seventh slideanim">
                    <img src="images/blog2.jpg" alt="" class="img-responsive"/>
                    <div class="mask">
                        <h5>January 10,2016</h5>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
						<a href="#contact-info" class="info">Write To Us</a>
                    </div>
                </div>
				<div class="blog-content slideanim">
					<p class="p1">News - January 10,2016</p>
					<a href="#"><h4>A Day With Vegetable Farm.</h4></a>
					<p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
				</div>
			</div>
			<div class="col-md-3 col-xs-12">
				<div class="view view-seventh slideanim">
                    <img src="images/blog3.jpg" alt="" class="img-responsive"/>
                    <div class="mask">
                        <h5>January 15,2016</h5>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
						<a href="#contact-info" class="info">Write To Us</a>
                    </div>
                </div>
				<div class="blog-content slideanim">
					<p class="p1">News - January 15,2016</p>
					<a href="#"><h4>Vegetable Farm For All.</h4></a>
					<p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
				</div>
			</div>
			<div class="col-md-3 col-xs-12">
				<div class="view view-seventh slideanim">
                    <img src="images/blog4.jpg" alt="" class="img-responsive"/>
                    <div class="mask">
                        <h5>January 20,2016</h5>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
						<a href="#contact-info" class="info">Write To Us</a>
                    </div>
                </div>
				<div class="blog-content slideanim">
					<p class="p1">News - January 20,2016</p>
					<a href="#"><h4>Vegetable Farm For Your Life.</h4></a>
					<p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- /Blog -->
<!-- Contact-Us -->

<!-- <section class="contact-us" id="contact">
	<h3 class="text-center slideanim">Contact Us</h2>
	<div class="container">
		<div class="row">
            <div class="col-md-8 col-xs-12 slideanim">
                <iframe class="googlemaps" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d380510.6741687111!2d-88.01234121699822!3d41.83390417061058!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1455598377120" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
            <div class="col-md-4 col-xs-12 slideanim">
				<h4>Our Contacts :</h4>
                <p>Phone:123.456.7890</p>
                <p>Email:<a href="mailto:name@example.com">name@example.com</a></p>
                <p>Address:3481 Melrose Place,Beverly Hills, Chicago 90210.</p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</section> -->

<!-- /Contact-Us -->
<!-- Contact-Form -->	
<!-- <section class="contact-form" id="contact-info">
	<h3 class="text-center slideanim">Contact Form</h3>
	<p class="text-center slideanim">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	<div class="container">
		<div class="row">
			<div class="col-lg-12 slideanim">
				<form role="form">
					<div class="row">
						<div class="form-group col-lg-4">
							<label>Name</label>
							<input type="text" class="form-control">
						</div>
						<div class="form-group col-lg-4">
							<label>Email Address</label>
							<input type="email" class="form-control">
						</div>
						<div class="form-group col-lg-4">
							<label>Phone Number</label>
							<input type="tel" class="form-control">
						</div>
						<div class="clearfix"></div>
						<div class="form-group col-lg-12">
							<label>Message</label>
							<textarea class="form-control" rows="6"></textarea>
						</div>
						<div class="form-group col-lg-12">
							<button type="submit" href="#" class="btn btn-lg btn-outline">Submit</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>	 -->
<!-- /Contact-Form -->
<!-- Footer -->
<!-- <footer class="text-center slideanim">
    <div class="footer-above">
        <div class="container">
            <div class="row">
                <div class="footer-col col-md-4">
                    <h4>Location</h4>
                    <p>3481 Melrose Place<br>Beverly Hills, Chicago 90210</p>
                </div>
                <div class="footer-col col-md-4">
                    <h4>Around the Web</h4>
                    <ul class="list-inline">
                        <li>
                            <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
                        </li>
                        <li>
                            <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-google-plus"></i></a>
                        </li>
                        <li>
                            <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
                        </li>
                        <li>
                            <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-linkedin"></i></a>
                        </li>
                        <li>
                            <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-dribbble"></i></a>
                        </li>
                    </ul>
                </div>
                <div class="footer-col col-md-4">
                    <h4>About Vegetable Farm</h4>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                </div>
            </div>
        </div>
	</div>
    <div class="footer-below">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                </div>
            </div>
        </div>
		<a href="#myPage" title="To Top">
			<span class="glyphicon glyphicon-chevron-up"></span>
		</a>
    </div>
</footer> -->

<!-- 查看销售或进货详细信息的弹出窗 -->
<div id="moreInfo_sale_parse_modal" class="modal fade bs-example-modal-lg" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog">
    <div class="modal-content" style="background-color: #fff;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">具体时间</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
        <table id="moreInfo_table" class="table table-hover">
 			<thead>
 				<tr>
		          <th>商品种类</th>
		          <th>样式</th>
		          <th>数量</th>
		          <th>地点</th>
		          <th>用途</th>
		        </tr>
 			</thead>
 			<tbody>
 				<tr class="success">
 					<td >餐具</td>
		            <td >52头牡丹</td>
		            <td >3套</td>
		            <td >湖南</td>
		            <td >个人使用</td>
 				</tr>
 				<tr class="info">
 					<td >餐具</td>
		            <td >52头牡丹</td>
		            <td >3套</td>
		            <td >湖南</td>
		            <td >个人使用</td>
 				</tr>
 				<tr class="success">
 					<td >餐具</td>
		            <td >52头牡丹</td>
		            <td >3套</td>
		            <td >湖南</td>
		            <td >个人使用</td>
 				</tr>
 				<tr class="info">
 					<td >餐具</td>
		            <td >52头牡丹</td>
		            <td >3套</td>
		            <td >湖南</td>
		            <td >个人使用</td>
 				</tr>
 				<tr class="success">
 					<td >餐具</td>
		            <td >52头牡丹</td>
		            <td >3套</td>
		            <td >湖南</td>
		            <td >个人使用</td>
 				</tr>
 				
 			</tbody>
		</table>
          
          
        </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- js files -->
 <script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap_select/bootstrap-select.min.js"></script> 
<script type="text/javascript" src="suggest_plugin/bootstrap-suggest.min.js"></script> 
<script src="js/classie.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/index.js"></script>
<script src="js/index2.js"></script>
<script>
$(window).on('load', function () {

    $('.selectpicker').selectpicker({
        'selectedText': 'cat'
    });

});

$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 900, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
    });
  });
  
  //加载省份数据
  loadProvinceAndCityData() ;
  
  //加载用户购买目的插件
  loadBuyGoal('sale_goal_input') ;
  loadGoods() ;
  loadGoodsStyle() ;
  
  clickInFun() ;
  //表格点击事件
  tableClick("sale_list_div") ;
  tableClick("purchase_list_div") ;
  showRemarks() ;
  
})
</script>
<script>
$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});

function loadProvinceAndCityData(){//加载省市数据
	$.getJSON('json/province_city.json',function(data){
		var zxs = "" ;
		var province_city = "" ;
		$.each(data,function(i,province){
			if(province.type == "1"){
				zxs += '<option value="'+province.name+'">'+province.name+'</option>' ;				
			}else{
				province_city += '<optgroup label="'+province.name+'" data-subtext="" data-icon="icon-ok">' ;
				if(province.cities != null && province.cities.length > 0){
					$.each(province.cities, function(index,city){
						province_city += ' <option value="'+city+'">'+city+'</option>' ;
					}) ;
				}
				province_city += '</optgroup>' ;
			}
		})
		$("#sale_destionation_select").append(zxs+province_city) ;
		
	}) ;
}

function loadBuyGoal(eId){
	var testBsSuggest = $("#"+eId).bsSuggest({
	      //url: "/rest/sys/getuserlist?keyword=",
	      url: "json/data.json",
	      getDataMethod: 'url',//每次取数据都从url取，可以实时更新获取的数据
	      /*effectiveFields: ["userName", "shortAccount"],
	      searchFields: [ "shortAccount"],
	      effectiveFieldsAlias:{userName: "姓名"},*/
	      showBtn: false,     //不显示下拉按钮
	      delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
	      //idField: "userId",
	      allowNoKeyword:true ,//允许空关键字搜索
	      autoDropup: true, //自动判断向上展开
	      //keyField: "goal",
	      allowNoKeyword: true,  //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求
	      processData: function(json){//个性化页面显示数据的方法，json为请求的数据
	    	  
	    	  return json ;
	      },
	      inputWarnColor: "rgba(255,255,255,0.18)", //没有选择的值时输入框的颜色
	  }).on('onDataRequestSuccess', function (e, result) {//数据加载成功回调方法
	      console.log('onDataRequestSuccess: ', result);
	  }).on('onSetSelectValue', function (e, keyword, data) {//选择对应选项回调方法
	      console.log('onSetSelectValue: ', keyword, data);
	  }).on('onUnsetSelectValue', function (e) {//输入时没有对应的选项回调方法，则在数据库添加对应的选项
	      console.log("onUnsetSelectValue");
	  	  return false ;
	  });
}

function loadGoods(){
	var testBsSuggest = $("#sale_goods_input").bsSuggest({
	      //url: "/rest/sys/getuserlist?keyword=",
	      url: "json/goods.json",
	      getDataMethod: 'url',//每次取数据都从url取，可以实时更新获取的数据
	      /*effectiveFields: ["userName", "shortAccount"],
	      searchFields: [ "shortAccount"],
	      effectiveFieldsAlias:{userName: "姓名"},*/
	      showBtn: false,     //不显示下拉按钮
	      delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
	      //idField: "userId",
	      allowNoKeyword:true ,//允许空关键字搜索
	      autoDropup: true, //自动判断向上展开
	      //keyField: "goal",
	      allowNoKeyword: true,  //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求
	      processData: function(json){//个性化页面显示数据的方法，json为请求的数据
	    	  
	    	  return json ;
	      },
	      inputWarnColor: "rgba(255,255,255,0.18)", //没有选择的值时输入框的颜色
	  }).on('onDataRequestSuccess', function (e, result) {//数据加载成功回调方法
	      console.log('onDataRequestSuccess: ', result);
	  }).on('onSetSelectValue', function (e, keyword, data) {//选择对应选项回调方法
	      console.log('onSetSelectValue: ', keyword, data);
	  }).on('onUnsetSelectValue', function (e) {//输入时没有对应的选项回调方法，则在数据库添加对应的选项
	      console.log("onUnsetSelectValue");
	  	  return false ;
	  });
}

function loadGoodsStyle(){
	var testBsSuggest = $("#sale_goodsStyle_input").bsSuggest({
	      //url: "/rest/sys/getuserlist?keyword=",
	      url: "json/goods_style.json",
	      getDataMethod: 'url',//每次取数据都从url取，可以实时更新获取的数据
	      /*effectiveFields: ["userName", "shortAccount"],
	      searchFields: [ "shortAccount"],
	      effectiveFieldsAlias:{userName: "姓名"},*/
	      showBtn: false,     //不显示下拉按钮
	      delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
	      //idField: "userId",
	      allowNoKeyword:true ,//允许空关键字搜索
	      autoDropup: true, //自动判断向上展开
	      //keyField: "goal",
	      allowNoKeyword: true,  //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求
	      processData: function(json){//个性化页面显示数据的方法，json为请求的数据
	    	  
	    	  return json ;
	      },
	      inputWarnColor: "rgba(255,255,255,0.18)", //没有选择的值时输入框的颜色
	  }).on('onDataRequestSuccess', function (e, result) {//数据加载成功回调方法
	      console.log('onDataRequestSuccess: ', result);
	  }).on('onSetSelectValue', function (e, keyword, data) {//选择对应选项回调方法
	      console.log('onSetSelectValue: ', keyword, data);
	  }).on('onUnsetSelectValue', function (e) {//输入时没有对应的选项回调方法，则在数据库添加对应的选项
	      console.log("onUnsetSelectValue");
	  	  return false ;
	  });
}

function clickInFun(){
	$(".clickIn").click(function(){
		var type = $(this).find("h5").html() ;
		if(type == "销售列表"){
			$("#sale_list_div").toggle(1000,function(){  });
		}else if(type == "进货列表"){
			$("#purchase_list_div").toggle(1800,function(){  });
		}
	}) ;
}

function tableClick(id){
	$("#"+id).find("tbody").find("tr").click(function(){
		$("#moreInfo_sale_parse_modal").modal("show") ;
	});
}

function showRemarks(){
	$("#moreInfo_table").find("tr").click(function(){
		alert(1) ;
		$(this).find("button").click() ;
	}) ;
}

function getremarks(){
	
}

</script>
<!-- /js files -->
</body>
</html>